
<script setup>
import { ref,computed } from 'vue';
const props = defineProps({
  dataList:{
    type:Object,
    required:true,
    default: ()=>{
      return []
    }
  },
  // 1 最高分 2中位数 3 平均分
  type:{
    type:String,
    default:'1'
  },
  name:{
    type:String,
    default:'期末'
  },

})

const option=computed(()=>{

  return{

    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(26, 14, 51, 0.10)',
      borderColor:'transparent',
      axisPointer: {
        type: 'shadow'
      },
      formatter: function(params) {
        console.log(params)
        // params是一个数组，包含了当前悬浮的所有数据点信息
        var result = '';
        let name = ''
        params.forEach(function(item) {
          name = item.name
          result += item.seriesName+  ' : ' + item.value + '<br/>';
        });
        return `<div style="color:#433C50;">${name+props.name}<br>${result}</div>`;
      }
    },
    xAxis: {
      type: 'category',
      data: props.dataList.length!=0?props.dataList.map(item=>item.title):[],
      axisLine: {
        lineStyle: {
          color: '#aba8b0' // 设置 X 轴线的颜色
        }
      },
      axisLabel: {
        color: '#aba8b0' // 设置 X 轴标签字体的颜色
      }
    },
    yAxis: {
      type: 'value',
      axisLine: {
        lineStyle: {
          color: '#aba8b0' // 设置 X 轴线的颜色
        }
      },
      axisLabel: {
        color: '#aba8b0' // 设置 X 轴标签字体的颜色
      }
    },
    grid: {
      top:30,
      left: 20,
      x: 0,
      y: 10,
      x2: 10,
      y2: 0,
      containLabel: true,
      show: true, //
    },
    series: [
      {
        data: props.dataList.map(item=>item.value[0]),
        type: 'line',
        name:'总分',
        itemStyle: {
          color: '#c8afff' // 设置颜色为红色
        },
      },
      {
        data: props.dataList.map(item=>item.value[1]),
        type: 'line',
        name:'英语',
        itemStyle: {
          color: '#6ecefe' // 设置颜色为红色
        },
      },
      {
        data: props.dataList.map(item=>item.value[2]),
        type: 'line',
        name:'数学',
        itemStyle: {
          color: '#9edb71' // 设置颜色为红色
        },
      },
      {
        data: props.dataList.map(item=>item.value[3]),
        type: 'line',
        name:'语文',
        itemStyle: {
          color: '#fed060' // 设置颜色为红色
        },
      }
    ]
  };
})
</script>

<template>

  <e-charts class="chart" :option="option" />
</template>

<style>
.chart{
  height: 300px;
}
</style>
